﻿<{include file="portal/header.tpl"}>
<div id="main" role="main">
    <{include file="portal/product/leftTag.tpl"}>
      <ul id="kooltaoWall">
          <{foreach from=$products item=p}>
          <li class="fn-type-<{$p.terms.ptype_third.tid}> fn-color-<{$p.terms.color.tid}>">
	  <a title="<{$p.title}>" href="<{$p.images.image.path}>" rel="lightbox" data-price="<{$p.price}>" data-url="<{$p.url}>" data-shop="<{$p.shop_url}>" data-nick="<{$p.nick}>">
	  <img class="lazyLoadImg" src="image/grey.gif" data-original="<{$p.images.thumbnail.path}>" width="215px" height="<{$p.images.thumbnail.height}>px">
	  </a>
	  <p>销量:<span class="p-sales"><{$p.sales}></span>来源:<span class="p-tname"><{$p.terms.source.tname}></span>价格:<span class="p-price"><{$p.price}></span></p>
	  <p class="p-description"><{$p.description}></p>
      <a class="hidden kool_collection">喜欢</a>
	  </li>
          <{/foreach}>
      </ul>
    </div>
<!--加载数据 -->
<div id="loader">
    <div id="loaderCircle" style="display: none"></div>
</div>
  <script src="util/js/jquery-1.8.2.min.js?v=120927"  type="text/javascript" charset="utf-8"></script>
  <script src="util/js/kooltao.min.js?v=120927" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">

      var options = {
          autoResize: false,
          container: $('#main'),
          offset: 10,
          itemWidth: 225
      }
      var isLoading = false;
      var page=1;
      var tid =<{$J_tid}>;
      //var count =2;
      var ajaxUrl = 'http://www.kooltao.com/index.php?ctrl=product&act=ajax_data';
      function onScroll(event) {
	  if(!isLoading) {
              var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 120);
              if(closeToBottom) {
                  loadData();
              }
          }
          
      }
      function loadData() {
          if(page>3){return;}
          isLoading = true;
          $('#loaderCircle').show();
          $.ajax({
              url: ajaxUrl,
              type:'POST',
              dataType: 'json',
              data: {"page": page,"tid":tid},
              success: onLoadData,
              error:function(){
//alert("数据加载异常,请重新加载...");
}
          });
      };

      function onLoadData(data) {
          isLoading = false;
          //var data = JSON.parse(data);
          //var data = JSON.parse(data.responseText);
          $('#loaderCircle').hide();
          var lazyClass="lazyAjaxLoadImg"+page;
          page++;
          var html ='';
          var i=0, len=data.length;
          //if(len==0 || l){return;}
          for(;i<len;i++){
              html += '<li >';
              html +='<a title="'+data[i].title+'" href="'+data[i].image+'" rel="lightbox"  data-price="'+data[i].price+'" data-url="'+data[i].url+'"';
              html +=' data-shop="'+data[i].shop_url+'" data-nick="'+data[i].nick+'">';
              html +='<img class="'+lazyClass+'" src="image/grey.gif" data-original="'+data[i].thumbnail+'" width="200px" height="'+data[i].thumbnail_height +'"/>';
              html +='</a>';
              html +='<p>销量:<span class="p-sales">'+data[i].sales+'</span>来源:<span class="p-tname">'+data[i].tname+'</span>价格:<span class="p-price">' +data[i].price+'</span></p>';
              html +='<p  class="p-description">'+data[i].description+'</p>';
              html +='<a class="hidden kool_collection">喜欢</a>';
              html += '</li>';
          }

          $('#kooltaoWall').append(html);
          var handler = $('#kooltaoWall li');
          handler.wookmark(options);
          $("img."+lazyClass).lazyload({effect : "fadeIn"});

      };
    $(document).ready(new function() {
      var filter ='';
      var handler = $('#kooltaoWall li');
      handler.wookmark(options);
      var elem;
      var aCollection ;
      $(handler).hover(function(){
        elem = $(this);
        elem.addClass("kooltao_hover");
        aCollection = $("a.kool_collection",elem);
          aCollection.removeClass("hidden");
      },function(){
          elem.removeClass("kooltao_hover");
          aCollection.addClass("hidden");
      });
      /* 过滤左侧标签内容 */
      $('#J_pTags li').click(function(){
          var item = $(this);
	  item.toggleClass('active');
	  var ul="J_pTags";
	  reWookmark(handler,ul);

      });
      $('#J_color li').click(function(){
          var item = $(this);
	  item.toggleClass('active');
	  var ul ="J_color";
	  reWookmark(handler,ul);

      });
      function checkIsAnd(){
          if($('#J_color li.active').length >0 && $('#J_pTags li.active').length >0) return true;
	  return false;
      }
      function reWookmark(handler,ul){
	//$('#kooltaoWall li').addClass("hidden");
	var oldFilter = filter;
        filter = '';
	if(checkIsAnd()){
            var filterProducts = ['#kooltaoWall li'];
	}
	else{
	    var filterProducts = [];
	}
        if(checkIsAnd()){
            var lis = $('#J_guideTage li');
	}
	else{
	    var lis = $('#'+ul+' li');
	}
        var i=0, length=lis.length, li;

        for(; i<length; i++) {
          li = $(lis[i]);
          if(li.hasClass('active')) {
	  	if(checkIsAnd()){
            	    filterProducts.push('.'+li.attr('data-filter'));
		}else{
		    filterProducts.push('#kooltaoWall li.'+li.attr('data-filter'));
		}
          }
        }
        if(filterProducts.length == 0) {
          filterProducts.push('#kooltaoWall li');
        }
	if(checkIsAnd()){
	    filter = filterProducts.join('');
	}else{
	    filter = filterProducts.join(', ');
	}
        
        if(oldFilter != filter) {
	    if(handler){
	        handler.wookmarkClear();
	        handler = null;
	    }
            $('#kooltaoWall li').addClass('hidden');
            handler = $(filter);
            handler.removeClass("hidden");
            handler.wookmark(options);
        }
      }
     
            var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="fn-backToTop"></div>').appendTo($("body"))
                    .text($backToTopTxt).attr("title", $backToTopTxt).click(function() {
                        $("html, body").animate({ scrollTop: 0 }, 120);
                    }), $backToTopFun = function() {
                var st = $(document).scrollTop(), winh = $(window).height();
                (st > 0)? $backToTopEle.show(): $backToTopEle.hide();
                //IE6下的定位
                if (!window.XMLHttpRequest) {
                    $backToTopEle.css("top", st + winh - 160);
                }
            };
            $(function() { $backToTopFun(); });
 $(window).bind('scroll', function(){

     //if(!$.browser.msie) {
         var nav = $('#nav');
          $(window).scrollTop()>52?nav.addClass('sticky') : nav.removeClass('sticky');
     //}
             /*var tags =$('#J_guideTage');
             $(window).scrollTop()>86?tags.addClass('sticky') : tags.removeClass('sticky');   */
	$backToTopFun();


          setTimeout(function(){onScroll()},20);
	  }
      );
        /*/二级Tag 过滤数据
        var tagsList = $('#J_pTags li');
        $(tagsList).click(function(){
            page =1;
            tid = $(this).attr("data-tid");
            loadData();
        });
        /*/
		//分享网站代码
		$('#J_shareKooltao').hover(function(){
			$('#J_shareProduct').removeClass('hidden');
		},function(){
            $('#J_shareProduct').addClass('hidden');
        });
    });
  </script>

  <script type="text/javascript" charset="utf-8">
      $(function() {          
          $("img.lazyLoadImg").lazyload({effect : "fadeIn"});
      });
  </script>


<{include file="portal/footer.tpl"}>


